<template>
  <div style="padding: 6px">
    <el-button size="mini" type="primary" @click="addGiftType(0)">添加分类</el-button>
    <el-table :data="giftTypeData" style="margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="礼品分类"></el-table-column>
      <el-table-column label="#" width="300">
        <template v-slot="scope">
          <el-button size="mini" @click="addGiftType(scope.row.id)">新增下级分类</el-button>
          <el-button size="mini" @click="editGiftType(scope.row.id, scope.row.pid)">修改</el-button>
          <el-popconfirm confirmButtonText='确定' cancelButtonText='取消'
                         icon="el-icon-info" iconColor="red"
                         title="确定删除数据吗?" @confirm="deleteGiftType(scope.row.id)">
            <el-button style="margin-left: 10px" slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="popupTitle" :visible.sync="entityDetailVisible" width="800px">
      <GiftTypeDetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId" :pid="pid"></GiftTypeDetail>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import GiftTypeDetail from "@/views/gift/type/giftTypeDetail";
export default {
  components:{GiftTypeDetail},
  data() {
    return {
      giftTypeData: [],
      pid : 0,

      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadGiftTypeData();
    this.$EventBus.$on("gtreload", () => {
      this.loadGiftTypeData();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("gtreload")
  },
  methods: {
    loadGiftTypeData(){
      request({
        url: '/gift/gifttype/getgifttypetreenode',
        data: {}
      }).then(res => {
        const { data } = res
        this.giftTypeData = data
      })
    },
    addGiftType(pid){
      this.popupEntityId=0
      this.pid=pid
      this.popupTitle= "新增礼品分类"
      this.entityDetailVisible= true
    },
    editGiftType(id, pid){
      this.popupEntityId=id
      this.pid=pid
      this.popupTitle= "修改礼品分类"
      this.entityDetailVisible= true
    },
    deleteGiftType(id){
      request({
        url: '/gift/gifttype/deletegifttype',
        data: {id : id}
      }).then(res => {
        if(res.code === '200') {
          this.$message.success(res.msg)
          this.loadGiftTypeData();
        }else{
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
